<template>
  <div id="app">
  	<h1>在线翻译</h1>
  	<h5 class="text-muted">简单/ 易用/ 便捷</h5>
    <translateForm v-on:formData="translateText"></translateForm>
    <translateOutput v-text="translatedText"></translateOutput>
  </div>
</template>

<script>
import TranslateForm from './components/translateForm.vue' // 引入组件
import TranslateOutput from './components/translateOutput.vue' // 引入组件

export default {
  name: 'app',
  data: function() {
    return {
      translatedText: ''
    }
  },
  components: {
    TranslateForm, // 调用组件
    TranslateOutput
  },
  methods: {
  	translateText: function(text, language) {
      // 接收translateForm传过来参数
  		this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180205T092652Z.bff421246f95f6ba.72989d052151867ce5408bf751f8b7c1228c2ab1&lang=' + language + '&text=' + text).then(function(response) {
        this.translatedText = response.body.text[0];
      });
  	}
  }
}
</script>

<style>
h1,
h5{
  text-align: center;
}
</style>
